<script setup lang='ts'>
import { ref,reactive, onMounted } from 'vue'
import { GetBarWheelMachineWorkAll } from '@/api/publicApi'
import HistoryTable from './HistoryTable.vue'

const stackTime = ref([])
const reclaimTime = ref([])

// refs
const stackHistoryTableRef = ref()
const reclaimHistoryTableRef = ref()

// 表格数据
const stackData:any = ref([])
const reclaimingData: any = ref([])

// 定义函数
// 定义函数
onMounted(() => {
})

const serachTableData = (num:number) => {
  if(num) {
    stackHistoryTableRef.value.getStockHistoryList(stackTime.value[0], stackTime.value[1])
  } else {
    reclaimHistoryTableRef.value.getStockHistoryList(reclaimTime.value[0], reclaimTime.value[1])
  }
}
</script>

<template>
  <div class="stack-reclaim-main-box">
    <div class="tabs-title">
      堆料历史
    </div> 
    <div class="filter-criteria-stack">
      <div class="date-picker-box">
        <el-date-picker
          v-model="stackTime"
          :clearable="false"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          type="datetimerange"
          format="YYYY-MM-DD HH时"
          value-format="YYYY-MM-DD HH:00:00"
          sizi="small"
        />
      </div>
      <div
        class="search-btn custom-button"
        @click="serachTableData(1)"
      >
        查询
      </div>
    </div>
    <div class="stack-table-box">
      <HistoryTable
        ref="stackHistoryTableRef"
        :num="1"
      />
    </div>
    <div class="tabs-title">
      取料历史
    </div> 
    <div class="filter-criteria-stack">
      <div class="date-picker-box">
        <el-date-picker
          v-model="reclaimTime"
          :clearable="false"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          type="datetimerange"
          format="YYYY-MM-DD HH时"
          value-format="YYYY-MM-DD HH:00:00"
          sizi="small"
        />
      </div>
      <div
        class="search-btn custom-button"
        @click="serachTableData(0)"
      >
        查询
      </div>
    </div>
    <div class="stack-table-box">
      <HistoryTable
        ref="reclaimHistoryTableRef"
        :num="0"
      />
    </div>
  </div>
</template>

<style scoped lang=scss>
.stack-reclaim-main-box {
  width: 100%;
  height: 100%;

  .tabs-title {
    padding-left: 15px;
  }

  .filter-criteria-stack {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 30px;
    margin-top: 10px;
    padding-left: 15px;

    /* border: 1px solid red; */

    .date-picker-box {
      width: 500px;
      height: 100%;
    }

    .search-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 100%;
      margin-left: 15px;
    }
  }

  .stack-table-box {
    height: 30%;
    margin-top: 10px;
    padding: 0 15px;
  }
}
</style>
